<template>
  <!-- video-player-box ==> video-player vjs-custom-skin -->
  <div class="index">
    <div>
      <span class="fs-18 color-white"
        >当前监控：{{ selectedCamera ? selectedCamera.name : "" }}</span
      >
      <el-dropdown @command="changeCamera">
        <img
          style="position: relative; top: 1px"
          class="ml-12 cursor-pointer"
          src="@/assets/icons/svg/bug.svg"
          alt=""
        />
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, i) in option.camera"
            :command="i"
            :key="item.id"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- <video-player
      class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :options="playerOptions"
      :playsinline="true"
    >
    </video-player> -->
    <div style="width: 800px">
      <video
        id="videoPlayer"
        style="width: 100%; height: 100%"
        class="video-js"
      ></video>
    </div>
  </div>
</template>

<script>
// 需要添加的配置
// videojs -- videoPlayer 核心
// import videojs from "video.js";
import "vue-video-player/src/custom-theme.css";
// 根据官方文档配置发现没有效果
import "video.js/dist/video-js.css";
// import { videoPlayer } from "vue-video-player";
export default {
  name: "index-page",
  components: {
    // videoPlayer,
  },
  data() {
    return {
      playerOptions: {
        // videojs options
        muted: true,
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            // type: "video/mp4",
            type: "application/x-mpegURL",
            src: "http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8",
          },
        ],
        // poster: "/static/images/author.jpg",
        volume: 0.6, // 初始音量
        autoplay: true, // 自动播放
      },
      selectedCamera: {},
      option: {
        camera: [],
      },

      options: {
        autoplay: true, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
        preload: "auto", // 预加载
        controls: true, // 显示播放的控件
      },
      player: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getVideo(nowPlayVideoUrl) {
      console.log("=====", nowPlayVideoUrl);
      this.player = this.$video("videoPlayer", this.options);
      // 关键代码， 动态设置src，才可实现换台操作
      //不动态设置依然也可以这样写
      this.player.src([
        {
          src: nowPlayVideoUrl,
          type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
        },
      ]);
    },
    // 请求数据
    getData() {
      let res = {
        data: [
          {
            id: "1",
            name: "视频1",
            url: "http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8",
          },
          {
            id: "2",
            name: "视频2",
            url: "https://open.ys7.com/v3/openlive/K41074775_1_2.m3u8?expire=1675919936&id=543420472029622272&t=254a5b84f8697fefb2bb00743247c15fb5cdfeae4498d203e66fd6f7acaa63a0&ev=100",
          },
        ],
      };
      this.option.camera = res.data;
      this.selectedCamera = res.data[0];
      this.init(this.selectedCamera.url);
    },
    // 切换按钮
    changeCamera(i) {
      let data = this.option.camera[i];
      if (data.id !== this.selectedCamera.id) {
        this.selectedCamera = data;
        this.getVideo(this.selectedCamera.url);
      }
    },
    // 初始化
    init(url) {
      console.log("url==========", this.playerOptions, url);
    },
  },
};
</script>
